<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AXIT</title>
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/social-media.css" />
    <link rel="stylesheet" href="./css/features.css" />
    <link rel="stylesheet" href="./css/process.css" />
    <link rel="stylesheet" href="./css/pricing.css" />
    <link rel="stylesheet" href="./css/testimonials.css" />
    <link rel="stylesheet" href="./css/custom-section.css" />
    <link rel="stylesheet" href="./css/iconfonts/iconfont.css" />
  </head>
  <body>
    <!-- Header -->
    <header>
      <div class="nav">
        <div class="common nav-content">
          <span
            class="brand"
            style="font-size: 40px; line-height: 40px; margin-top: -10px"
          >
            <span>AX</span><span>IT</span>
          </span>
          <ul class="menu">
            <li>Features</li>
            <li>About</li>
            <li>Pricing</li>
            <li>Reviews</li>
            <li>Contact</li>
          </ul>
        </div>
      </div>
      <div class="header-panel">
        <div class="common">
          <div class="header-content">
            <div class="header-content-left">
              <span
                class="brand"
                style="font-size: 80px; line-height: 80px; margin-bottom: 20px"
              >
                <span>AX</span><span>IT</span>
              </span>
              <p style="line-height: 42px; font-size: 40px">
                MODERN AXURE TEMPLATE FOR BEAUTIFUL PROTOTYPES
              </p>
              <div class="line"></div>
              <p style="line-height: 20px; margin-bottom: 40px">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sed
                esse fuga quaerat vero odio aliquam dolor expedita dignissimos
                ratione, labore dolorem architecto consequuntur molestias ad at,
                aliquid temporibus! Quam.
              </p>
              <span class="btn btn-white">Download</span>
            </div>
            <div class="header-content-right">
              <div class="login">
                <div class="login-title">
                  Try Your <span>FREE</span> Trial Today
                </div>
                <div class="login-content">
                  <input class="input" type="text" placeholder="Name" />
                  <input class="input" type="text" placeholder="Email" />
                  <input class="input" type="text" placeholder="Password" />
                </div>
                <div class="login-btn">Get Started</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Social Media -->
    <div class="social-media">
      <div class="common">
        <div class="left">
          <h3 class="dark">Social Media</h3>
          <p class="grey">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui
            dolores nesciunt vero, sed illo iste nam doloremque!
          </p>
        </div>
        <div class="right">
          <ul>
            <li><span class="iconfont icon-facebook-f grey"></span></li>
            <li><span class="iconfont icon-twitter grey"></span></li>
            <li><span class="iconfont icon-google grey"></span></li>
            <li><span class="iconfont icon-pinterest grey"></span></li>
            <li><span class="iconfont icon-instagram grey"></span></li>
            <li><span class="iconfont icon-stumbleupon grey"></span></li>
            <li><span class="iconfont icon-linkedin-in grey"></span></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- features -->
    <div class="features">
      <div>
        <div class="common">
          <div class="tab-wrap">
            <div class="tab">TAB 1</div>
            <div class="tab">TAB 2</div>
            <div class="tab">TAB 3</div>
          </div>
          <div class="left">
            <h3 class="dark">Tabs with soft transitioning effect.</h3>
            <br /><br />
            <p class="grey">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet. Proin gravida dolor sit amet lacus
              accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
              Cum sociis natoque penatibus et magnis dis parturient montes.
              <br /><br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet.
            </p>
            <br />
            <span class="btn btn-bottom">Download</span>
          </div>
          <div class="right">
            <img src="./img/city.png" alt="right" />
          </div>
        </div>
      </div>
      <div>
        <div class="common">
          <div class="left">
            <img src="./img/ville1.jpg" alt="ville1" />
          </div>
          <div class="right">
            <h3 class="dark">Sub list section</h3>
            <div class="line orange-bg" style="margin: 20px 0"></div>
            <p class="grey">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet. Proin gravida dolor sit amet lacus
              accumsan et viverra justo commodo.
            </p>
            <br />
            <div class="block">
              <div class="circle">
                <span class="iconfont icon-upload orange"></span>
              </div>
              <span>
                <h4 class="dark">Title</h4>
                <p class="grey">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Aenean euismod bibendum laoreet.
                </p>
              </span>
            </div>
            <br />
            <div class="block">
              <div class="circle">
                <span class="iconfont icon-upload orange"></span>
              </div>
              <span>
                <h4 class="dark">Title</h4>
                <p class="grey">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
                  lacus accumsan et viverra justo commodo.
                </p>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="common">
          <div class="left">
            <h3 class="dark">Standard Picture Section</h3>
            <div class="line orange-bg" style="margin: 20px 0"></div>
            <p class="grey">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet. Proin gravida dolor sit amet lacus
              accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
              Cum sociis natoque penatibus et magnis dis parturient montes.
              <br /><br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet.
            </p>
          </div>
          <div class="right">
            <img src="./img/ville2.jpg" alt="ville2" />
          </div>
        </div>
      </div>
    </div>

    <!-- process -->
    <div class="process">
      <div class="top">
        <span class="titles dark">WHY THIS IS AWSOME</span>
        <div class="line orange-bg" style="margin: 20px 0"></div>
        <p class="grey">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </p>
      </div>
      <div class="bottom">
        <div class="common">
          <div class="item">
            <div>
              <span class="iconfont icon-idea"></span>
            </div>
            <h3 class="dark">Thoughtful Design</h3>
            <p class="grey">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet. Proin gravida dolor sit amet lacus
              accumsan et viverra.
            </p>
          </div>
          <div class="item">
            <div>
              <span class="iconfont icon-keyboard-o"></span>
            </div>
            <h3 class="dark">Well Crafted</h3>
            <p class="grey">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet. Proin gravida dolor sit amet lacus
              accumsan et viverra.
            </p>
          </div>
          <div class="item">
            <div>
              <span class="iconfont icon-Lightning"></span>
            </div>
            <h3 class="dark">Easy to Customize</h3>
            <p class="grey">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
              euismod bibendum laoreet. Proin gravida dolor sit amet lacus
              accumsan et viverra.
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- pricing -->
    <div class="pricing">
      <div class="top">
        <span class="titles dark">PRICING OPTIONS</span>
        <div class="line orange-bg" style="margin: 20px 0"></div>
        <p class="grey">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="bottom">
        <div class="common">
          <div class="price">
            <div>Basic</div>
            <div>
              <div>
                <a>$</a>
                <a>0</a>
              </div>
              <p class="grey">Free for Life</p>
            </div>
            <div></div>
            <div>
              <ul>
                <li>1 GB OF SPACE</li>
                <li>10 GB OF BANDWIDTH</li>
                <li>3 WEBSITES</li>
                <li>BASIC CUSTOMIZATION</li>
                <li>WORDPRESS INTEGRATION</li>
                <li>EMAIL SUPPORT</li>
              </ul>
            </div>
          </div>
          <div class="price">
            <div>Professional</div>
            <div>
              <div>
                <a>$</a>
                <a>19</a>
              </div>
              <p class="grey">Monthly Payment</p>
            </div>
            <div>OUR MOST POPULAR</div>
            <div>
              <ul>
                <li>5 GB OF SPACE</li>
                <li>50 GB OF BANDWIDTH</li>
                <li>12 WEBSITES</li>
                <li>ADVANCED CUSTOMIZATION</li>
                <li>WORDPRESS INTEGRATION</li>
                <li>EMAIL SUPPORT</li>
              </ul>
            </div>
          </div>
          <div class="price">
            <div>Enterprice</div>
            <div>
              <div>
                <a>$</a>
                <a>70</a>
              </div>
              <p class="grey">Monthly Payment</p>
            </div>
            <div></div>
            <div>
              <ul>
                <li>UNLIMITED SPACE</li>
                <li>UNLIMITED BANDWIDTH</li>
                <li>100 WEBSITES</li>
                <li>ADVANCED CUSTOMIZATION</li>
                <li>WORDPRESS INTEGRATION</li>
                <li>24/7 CUSTOMER SUPPORT</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- testimonials -->
    <div class="testimonials">
      <div class="top">
        <span class="titles dark">WHAT OUR CUSTOMERS ARE SAYING</span>
        <div class="line orange-bg" style="margin: 20px 0"></div>
        <p class="grey">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="bottom">
        <div class="common">
          <div class="item">
            <div class="dialog">
              <p class="grey">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Doloribus accusamus expedita repellat similique odio aspernatur
                ex, architecto eaque quo suscipit.
              </p>
              <div class="triangle"></div>
            </div>
            <div class="avatar">
              <img src="./img/avatar.png" alt="avartar" />
              <div>
                <h3>Jeremy.H</h3>
                <p class="grey">Manager</p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="dialog">
              <p class="grey">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Doloribus accusamus expedita repellat similique odio aspernatur
                ex, architecto eaque quo suscipit.
              </p>
              <div class="triangle"></div>
            </div>
            <div class="avatar">
              <img src="./img/avatar.png" alt="avartar" />
              <div>
                <h3>Jeremy.H</h3>
                <p class="grey">Manager</p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="dialog">
              <p class="grey">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Doloribus accusamus expedita repellat similique odio aspernatur
                ex, architecto eaque quo suscipit.
              </p>
              <div class="triangle"></div>
            </div>
            <div class="avatar">
              <img src="./img/avatar.png" alt="avartar" />
              <div>
                <h3>Jeremy.H</h3>
                <p class="grey">Manager</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- custom-section -->
    <div class="custom-section">
      <span class="titles white">STYLISH AXURE DESIGN</span>
      <div class="line"></div>
      <p class="white" style="margin-bottom: 40px">
        Use the sections you need, remove the ones you don't. Create gorgeous
        prototypes faster than ever!
      </p>
      <span class="btn btn-white">Download</span>
    </div>

    <!-- Footer -->
    <footer>
      <div class="contact-us">
        <div class="top">
          <span class="titles dark">CONTACT US</span>
          <div class="line orange-bg" style="margin: 20px 0"></div>
          <p class="grey">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. copy 3
          </p>
        </div>
        <div class="middle">
          <div class="common">
            <div class="item">
              <input class="input" type="text" placeholder="Name" />
              <input class="input" type="text" placeholder="Email" />
              <input class="input" type="text" placeholder="Password" />
            </div>
            <div class="item">
              <input class="input" type="text" placeholder="Message" />
            </div>
          </div>
        </div>
        <div class="bottom">
          <span class="btn btn-bottom">Send Message</span>
        </div>
      </div>
      <div class="bottom-banner">
        <div class="common grey">
          <div class="top">
            <ul>
              <li><span class="iconfont icon-facebook-f"></span></li>
              <li><span class="iconfont icon-twitter"></span></li>
              <li><span class="iconfont icon-google"></span></li>
              <li><span class="iconfont icon-pinterest"></span></li>
              <li><span class="iconfont icon-instagram"></span></li>
              <li><span class="iconfont icon-stumbleupon"></span></li>
              <li><span class="iconfont icon-linkedin-in"></span></li>
            </ul>
          </div>
          <div class="bottom">© 2015 Axure Themes</div>
        </div>
      </div>
    </footer>
  </body>
</html>
